<template>
  <div class="center-row">
    <div class="custom-card left-card">
      <div class="custom-card-title">街道工单趋势</div>
      <div class="chart-text">
        <div class="item">
          <div class="tit">本月总工单数</div>
          <div class="num">
            {{ MonthAndDayWorkOrdersCountData.month_count }}个
          </div>
        </div>
        <div class="item">
          <div class="title">当天工单数</div>
          <div class="num">
            {{ MonthAndDayWorkOrdersCountData.day_count }}个
          </div>
        </div>
      </div>
      <div class="chart-content" style="height: 300px">
        <LineBar :xAxisData="lineXAxisData" :seriesData="lineSeriesData" />
      </div>
    </div>
    <div class="custom-card right-card">
      <el-table
        :data="isAutoScrolling ? [...tableData, ...tableData] : tableData"
        border
        style="width: 100%"
        height="420"
        ref="scroll_Table"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <el-table-column prop="source" label="工单来源" />
        <el-table-column prop="workOrderNumber" label="工单编号" />
        <el-table-column
          prop="complaintCategoryLevel1"
          label="诉求分类（一级）"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import LineBar from "@/components/echarts/lineBar.vue";
import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
const props = defineProps({
  lineXAxisData: Array,
  lineSeriesData: Array,
  MonthAndDayWorkOrdersCountData: Object,
  tableData: Array,
});

// 20条假数据
// const tableData = ref(
//   Array.from({ length: 20 }).map((_, i) => ({
//     source: i % 2 === 0 ? "12345" : "公众号",
//     workOrderNumber: `NO${1000 + i}`,
//     complaintCategoryLevel1: ["社区治理", "消费纠纷", "市场监管"][i % 3],
//   }))
// );

const scroll_Table = ref(null);
let scrolltimer = null;
const isAutoScrolling = ref(true);

function tryStartScroll(retry = 0) {
  nextTick(() => {
    const divData =
      scroll_Table.value?.bodyWrapper ||
      scroll_Table.value?.$el?.querySelector(".el-scrollbar__wrap");
    if (divData && divData.scrollHeight > divData.clientHeight) {
      autoScroll(false);
    } else if (retry < 20) {
      setTimeout(() => tryStartScroll(retry + 1), 200);
    }
  });
}

onMounted(() => {
  tryStartScroll();
});
onUnmounted(() => {
  window.clearInterval(scrolltimer);
});

watch(
  () => props.tableData,
  () => {
    tryStartScroll();
  }
);

const autoScroll = (stop) => {
  const divData =
    scroll_Table.value?.bodyWrapper ||
    scroll_Table.value?.$el?.querySelector(".el-scrollbar__wrap");
  if (!divData) return;
  if (stop) {
    window.clearInterval(scrolltimer);
  } else {
    if (divData.scrollHeight <= divData.clientHeight) return;
    window.clearInterval(scrolltimer);
    scrolltimer = window.setInterval(() => {
      divData.scrollTop += 1;
      if (divData.scrollTop >= divData.scrollHeight / 2) {
        divData.scrollTop = 0;
      }
    }, 30);
  }
};

const handleMouseEnter = () => {
  isAutoScrolling.value = false;
  autoScroll(true);
};
const handleMouseLeave = () => {
  isAutoScrolling.value = true;
  autoScroll(false);
};
</script>

<style scoped>
.center-row {
  display: flex;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}
.left-card {
  flex: 0 1 60%;
  min-width: 0;
  max-width: 100%;
}
.right-card {
  flex: 0 1 40%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.custom-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  padding: 24px;
  margin-bottom: 24px;
}
.custom-card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
.chart-text {
  display: flex;
  gap: 40px;
  margin-bottom: 16px;
}
.chart-text .item .tit,
.chart-text .item .title {
  color: #999;
  font-size: 14px;
  margin-bottom: 4px;
}
.chart-text .item .num {
  color: #222;
  font-size: 24px;
  font-weight: bold;
}
.chart-content {
  margin-top: 8px;
}
</style>
